<template>
  <div>
    <el-aside :width="$store.state.isCollapsed ? '64px' : '240px'">
      <el-menu :router="true" :collapse="$store.state.isCollapsed" :collapse-transition="false" :default-active="route.fullPath">
        <el-menu-item index="/index">
          <el-icon><HomeFilled /></el-icon>
          <span>首页</span>
        </el-menu-item>
        <el-menu-item index="/center">
          <el-icon><Avatar /></el-icon>
          <span>个人中心</span>
        </el-menu-item>

        <el-sub-menu index="/user-manage" v-admin>
          <template #title>
            <el-icon><UserFilled /></el-icon>
            <span>用户管理</span>
          </template>
          <el-menu-item index="/user-manage/adduser">添加用户</el-menu-item>
          <el-menu-item index="/user-manage/userlist">用户列表</el-menu-item>
          <el-menu-item index="/user-manage/studentlist">学生列表</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="/course-manage" v-teacher>
          <template #title>
            <el-icon><MessageBox /></el-icon>
            <span>课程管理</span>
          </template>
          <el-menu-item index="/course-manage/addcourse" v-admin>添加课程</el-menu-item>
          <el-menu-item index="/course-manage/courselist">课程列表</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="/score-manage" v-teacher>
          <template #title>
            <el-icon><Reading /></el-icon>
            <span>成绩管理</span>
          </template>
          <el-menu-item index="/score-manage/addscore">发布成绩</el-menu-item>
          <el-menu-item index="/score-manage/scorelist">成绩分析</el-menu-item>
        </el-sub-menu>

        <el-menu-item index="/mycourse" v-student>
          <el-icon><MessageBox /></el-icon>
          <span>我的课程</span>
        </el-menu-item>
        <el-menu-item index="/myscore" v-student>
          <el-icon><Reading /></el-icon>
          <span>我的成绩</span>
        </el-menu-item>
      </el-menu>
    </el-aside>
  </div>
</template>

<script setup>
import { HomeFilled, Avatar, UserFilled, MessageBox, Reading } from '@element-plus/icons-vue'
import { useRoute } from 'vue-router'
import { useStore } from 'vuex'
const route = useRoute()
const store = useStore()

const vAdmin = {
  mounted(el) {
    // console.log(el)
    // 如果不是角色不是管理员则删除自身 （DOM）
    if (store.state.userInfo.role !== 1) {
      el.parentNode.removeChild(el)
    }
  }
}
const vTeacher = {
  mounted(el) {
    // 如果不是角色不是管理员或者教师则删除自身 （DOM）
    if (store.state.userInfo.role === 3) {
      el.parentNode.removeChild(el)
    }
  }
}
const vStudent = {
  mounted(el) {
    if (store.state.userInfo.role !== 3) {
      el.parentNode.removeChild(el)
    }
  }
}
</script>

<style lang="scss" scoped>
.el-aside {
  height: 100vh;
  .el-menu {
    height: 100vh;
  }
}
</style>
